<template>
  <div class="asides-index">
    <div class="weather">
      <div v-if="!weatherData" class="ph">
        <loading />
      </div>
      <div else class="weather-content">
        <div class="address">
          <span>
            你的位置是：
            <i>{{IPaddress}}</i>
          </span>
        </div>
        <div class="weather-wrapper">
          <ul>
            <li v-for="data in weatherData" :key="data.adcode">
              <div class="text">
                <span>{{data.date}}</span>
                <span>{{data.dayweather}}/{{data.nighttemp}}° - {{data.daytemp}}°</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <expert />
    <div class="joke">
      <div v-if="!jokeData.length" class="ph">
        <loading />
      </div>
      <el-carousel v-else indicator-position="none" height="250px" :interval="Number(8000)">
        <el-carousel-item v-for="item in jokeData" :key="item.hashId">
          <h3>笑话大全</h3>
          <p>{{ item.content }}</p>
        </el-carousel-item>
      </el-carousel>
    </div>
    <bei></bei>
  </div>
</template>

<script>
import expert from "@/components/comment/expert.vue"
import { mapState, mapActions } from "Vuex";
export default {
  name: "asides-index",
  components: {
    expert
  },
  data() {
    return {
      jokeData: [],
      IPaddress: "",
      weatherData: [],
      adcodeAddress: "",
      allUserData: "",
      limit: 3,
      skip: 0,
      total: 0
    };
  },
  watch: {
    IPaddress() {
      if (this.IPaddress) {
        let name = this.IPaddress.slice(-3);
        this.$axios
          .get(`/weatherApi`, {
            params: {
              city: this.adcodeAddress,
              key: "f09aa99a0f160728175a740815e044ac",
              extensions: "all"
            }
          })
          .then(res => {
            let data = res.data.forecasts[0].casts;
            data.push(data[0]);
            this.weatherData = data;
          })
          .catch(err => {
            console.log("错误信息：" + err);
          });
      }
    }
  },
  mounted() {
    this.$axios
      .get(`/ipApi`)
      .then(res => {
        if (res.data.city) {
          this.adcodeAddress = res.data.adcode;
          this.IPaddress = res.data.city;
        }
      })
      .catch(err => {
        console.log("错误信息：" + err);
      });

    this.getAllUserData({ limit: this.limit, skip: this.skip })
      .then(res => {
        if (res.data.ok === 1) {
          this.total = res.data.total;
          this.allUserData = res.data.data;
        }
      })
      .catch(err => {
        console.log(err);
      });

    this.$axios
      .get(`/jokeApi`)
      .then(res => {        
        this.jokeData = res.data.result;
      })
      .catch(err => {});
  },
  methods: {
    handleSizeChange(data) {
      this.getAllUserData({
        limit: this.limit,
        skip: this.skip + this.limit * (data - 1)
      })
        .then(res => {
          if (res.data.ok === 1) {
            this.total = res.data.total;
            this.allUserData = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    gotoUserInfo(id) {
      this.$router.push("/userinfo/" + id);
    },
    ...mapActions("user", ["getAllUserData"])
  }
  // computed: {
  //   ...mapState("user", ["allUserData"])
  // }
};
</script>

<style lang="sass" scoped>
@keyframes weather
  0%
    top: 0
  100%
    top: -120px
@import '@/assets/default.sass'
.asides-index
  width: 100%
  .joke
    width: 100%
    margin-top: 10px
    .ph
      width: 100%
      height: 250px
      background-color: #eee
  .weather
    width: 100%
    background-color: #fff
    padding: 10px 20px
    .weather-content
      width: 100%
      .address
        width: 100%
        height: 30px
        line-height: 30px
        >span
          font-size: 16px
          color: #333          
      .weather-wrapper
        width: 100%
        height: 30px
        position: relative
        border-radius: 5px
        overflow: hidden
        >ul
          width: 100%
          position: absolute
          background-color: #eee
          padding: 0 10px
          animation: weather 10s linear infinite
          >li
            width: 100%
            height: 30px
            line-height: 30px
            .text
              width: 100%
              height: 30px
              @include flex(space-between,center)    
</style>

<style scoped>
.el-carousel__item {
  padding: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 30px;
  margin: 0;
}
.el-carousel__item p {
  line-height: 20px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>